<template>
    <div>
        <div class="title">
            <el-input maxlength="15" style="width:280px;" placeholder="搜索昵称/手机号" v-model="keyWord">
                <el-button slot="suffix" @click="searchData" type="primary" icon="el-icon-search" style="border-radius:0 4px 4px 0;margin-right:-5px">搜索</el-button>
            </el-input>
        </div>
        <div class="data">
            <el-table v-loading="loading" :data="tableData" style="width: 100%">
                <el-table-column type="index" label="序号" align="center" min-width="50"></el-table-column>
                <el-table-column prop="userName" label="昵称" align="center" min-width="80" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="headImage" label="头像" align="center" min-width="60">
                    <template slot-scope="scope">
                        <img :src="scope.row.headImage"
                            style="width: 40px;height: 40px;border-radius:40px;overflow: hidden;"/>
                    </template>
                </el-table-column>
                <el-table-column prop="mobile" label="手机" align="center" min-width="120"></el-table-column>
                <el-table-column prop="amount" label="账户余额" align="center" min-width="80"></el-table-column>
                <el-table-column prop="cardAmount" label="卡余额" align="center" min-width="80"></el-table-column>
                <el-table-column prop="sumAmount" label="总余额" :formatter="amount" align="center" min-width="80"></el-table-column>
                <el-table-column prop="isvalid" :formatter="formatStatus" align="center" label="状态" min-width="60"></el-table-column>
                <el-table-column prop="createtime" label="创建时间" align="center" min-width="120"></el-table-column>
                <el-table-column label="操作" align="center" min-width="140">
                    <template slot-scope="scope">
                        <div class="editCell">
                            <el-link @click="getChongzhiRecodsHandler(scope.row)">充值记录</el-link>
                            <el-link v-if="!scope.row.mobile" @click="mobileHandler(scope.row)">绑定手机号</el-link>
                            <el-link @click="transferHandler(scope.row)">转账</el-link>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page="page"
                    :page-size="pageSize"
                    :total="total"
            ></el-pagination>
            <el-dialog title="转账" :visible.sync="dialogVisibleTransfer" width="40%">
                <div class="order">
                    <el-form ref="formTransfer" :model="formDataTransfer" label-width="100px">
                        <el-form-item class="nav-form-item" label="卡号">
                            <el-select v-model="formDataTransfer.cardNo" placeholder="选择卡号">
                                <el-option v-for="item in cardData" :key="item.label" :label="item.cardNo" :value="item.cardNo"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item class="nav-form-item" label="转账金额" prop="amount" style="margin-top:20px;margin-left:-20px">
                            <el-input
                                maxlength="6"
                                type="text"
                                v-model="formDataTransfer.amount"
                                style="width:300px;"
                                placeholder="请输入转账金额"
                                clearable
                            />
                        </el-form-item>
                    </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisibleTransfer = false">取 消</el-button>
        <el-button type="primary" @click="confimTransferHandler">确 定</el-button>
      </span>
            </el-dialog>
            <el-dialog title="绑定手机号" :visible.sync="dialogVisibleMobile" width="40%">
                <div class="order">
                    <el-form ref="formRefund" :model="formData" label-width="100px">
                        <div class="order-1">
                            <div class="text">用户昵称</div>
                            {{nickName}}
                        </div>
                        <div class="order-1">
                            <div class="text">用户头像</div>
                            <img :src="avatar"
                                 style="width: 80px;height: 80px;border-radius:80px;overflow: hidden;"/>
                        </div>
                        <el-form-item class="nav-form-item" label="手机号" prop="amount"
                                      style="margin-top:20px;margin-left:-20px">
                            <el-input
                                    maxlength="15"
                                    type="text"
                                    v-model="formData.mobile"
                                    style="width:300px;"
                                    placeholder="请输入手机号"
                                    clearable
                            />
                        </el-form-item>
                    </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisibleMobile = false">取 消</el-button>
        <el-button type="primary" @click="confimMobileHandler">确 定</el-button>
      </span>
            </el-dialog>
        </div>
    </div>


</template>
<script>
    import {getRegisterUser, bindMobile} from '@/api/registerUser'
    import {transferAccounts, getCardListByCustomerId} from '@/api/card'
    import {getDataScopeList} from '@/api/user'
    import {getToken} from '@/utils/auth'

    export default {
        data() {
            return {
                dialogVisibleMobile: false,
                operatorId: null,
                options: [],
                cardData: [],
                tableData: [],
                nickName: "",
                avatar: "",
                formData: {
                    mobile: "",
                    userId: ""
                },
                cardNo: this.$route.query.cardNo,
                page: 1,
                pageSize: 10,
                loading: true,
                total: 0,
                data: {},
                keyWord: '',
                dialogVisibleTransfer: false,
                formDataTransfer: {
                    amount: "",
                    customerId: "",
                    cardNo: ""
                },
                dataRow: {}
            }
        },
        created() {
            this.getDataList()
            this.getDataScopeList()
        },
        methods: {
            getCardList() {
                getCardListByCustomerId({customerId: this.dataRow.id}).then(res => {
                    this.cardData = [...res.data]
                })
            },
            transferHandler(row) {
                this.dataRow = row

                this.formDataTransfer.customerId = row.id
                this.formDataTransfer.amount = ""
                this.formDataTransfer.cardNo=""
                this.getCardList()
                this.dialogVisibleTransfer = true
            },
            confimTransferHandler() {
                if (!this.formDataTransfer.cardNo) {
                    this.$message.error("请选择卡号")
                    return;
                }
                if (!this.formDataTransfer.amount || this.formDataTransfer.amount <= 0 || this.formDataTransfer.amount > this.dataRow.amount) {
                    this.$message.error("转账金额应在0到余额范围哦")
                    return;
                }
                this.$refs.formTransfer.validate(valid => {
                    if (valid) {
                        transferAccounts(this.formDataTransfer).then(res => {
                            if (res.message.code != 0) {
                                this.$message.error(res.message.message)
                            } else {
                                this.$message({
                                    message: '操作成功',
                                    type: 'success'
                                })
                                this.dialogVisibleTransfer = false
                                this.getDataList()
                            }
                        })
                    }
                })
            },
            mobileHandler(row) {
                this.nickName = row.userName
                this.formData.userId = row.id
                this.avatar = row.headImage
                this.dialogVisibleMobile = true
            },
            confimMobileHandler() {
                if (!this.formData.mobile) {
                    this.$message.error("请输入手机号")
                    return;
                }
                bindMobile(this.formData).then(res => {
                    if (res.message.code == 0) {
                        this.$message({
                            message: '操作成功',
                            type: 'success'
                        })
                        this.dialogVisibleMobile = false
                        this.getDataList()
                    } else {
                        this.$message.error(res.message.message)
                    }
                })
            },
            getChongzhiRecodsHandler(row) {
                this.$router.push({
                    path: 'registerUser/chongzhiRecods',
                    query: {
                        userId: row.id
                    }
                })
            },
            getDataScopeList() {
                getDataScopeList().then(res => {
                    if (res.data && res.data.length > 0) {
                        this.options = [...res.data]
                    }
                })
            },
            searchData() {
                this.page = 1
                this.getDataList()
            },
            getDataList() {
                this.loading = true
                let param = {
                    keyWord: this.keyWord,
                    userId: this.operatorId,
                    cardNo: this.cardNo,
                    pageNo: this.page,
                    pageSize: this.pageSize
                }
                getRegisterUser(param).then(res => {
                    if (res.message.status == 200) {
                        this.tableData = [...res.data.records]
                        this.total = res.data.total
                    }

                    this.loading = false
                })
            },
            amount(row) {
                return '￥' + row.sumAmount
            },
            handleCurrentChange(val) {
                this.page = val
                this.getDataList()
            },
            formatStatus(row) {
                if (row.isvalid == 'Y') {
                    return '正常'
                } else {
                    return '禁用'
                }
            }
        }
    }
</script>
<style scoped lang="scss">
    .data {
        margin-left: 20px;
        margin-top: 20px;
        margin-right: 10px;
    }

    .title {
        margin-left: 20px;
        margin-top: 20px;
        display: flex;
        flex-direction: row;
    }

    .order {
        display: flex;
        flex-direction: column;
        color: #fff;

        .text {
            color: #4adfff;
            width: 100px;
        }

        .order-1 {
            padding: 8px 10px;
            display: flex;
        }
    }
</style>